<template>
	<view class="fans">
		<!-- 我的邀请人 -->
		<view class="top">
			<view class="top-l">
				<image src="" mode=""></image>
			</view>
			<view class="top-c">
				<view>卖货宝宝</view>
				<view>我的邀请人</view>
			</view>
			<view class="top-r"></view>
		</view>
		
		<!-- 口碑好评 -->
		<view class="top2">
			<view class="top2-l">
				<view>口碑好评</view>
				<view>3</view>
			</view>
			<view class="top2-r">
				<view class="top2-item" v-for="(item,i) in 3" :key="i">
					<image src="" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="item-top">
			<view class="it-l">
				<view>我的粉丝</view>
				<view>{{fans.allNums}}</view>
			</view>
			<view class="it-r">
				<view class="itr-l">
					<view>今日</view>
					<view>{{fans.todayNums}}</view>
				</view>
				<view class="itr-r">
					<view>昨日</view>
					<view>{{fans.yesterdayNums}}</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item,i) in fansList" :key="i">
				<view class="item-l">
					<image src="" mode=""></image>
				</view>
				<view class="item-c">
					<text>悟空</text>
					<text>2018/12/20 加入</text>
				</view>
				<view class="item-r">
					已购买五单
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Api from '../../../util/api.js'
	export default {
		data() {
			return {
				account:'',
				fansList:[],
				fans:''
			};
		},
		onLoad() {
			this.getData();
		},
		methods: {
			getData(){
				Api.fetchPost('/fsbus/M2213',{}).then(res=>{
					if(res.errorNo == 0){
						console.log(res)
						this.account = res.results.mAccount;
						this.fansList = res.results.mFansList.list;
						this.fans = res.results.mFans;
					}
				}).catch(err=>{})
			},
		}
	}
</script>

<style>
.fans {
	width: 100%;
	min-height: 100%;
	position: absolute;
	font-size: 26upx;
	background-color: #f3f3f3;
}
.top {
	height: 160upx;
	display: flex;
	background-color: #fff;
	padding: 36upx 30upx;
}
.top-l {
	width: 88upx;
	margin-right: 20upx;
}
.top-l image {
	width: 88upx;
	height: 88upx;
	background-color: #848484;
	border-radius: 100%;
}
.top-c {
	flex: 1;
	line-height: 44upx;
	color: #999999;
}
.top-c view:first-child {
	color: #333;
	font-size: 30upx;
}

.top-r {
	width: 60upx;
	/* background: url(../../../static/index/down.png) no-repeat center; */
	background-size: 28upx;
}
.top2 {
	width: 100%;
	height: 220upx;
	padding: 30upx 0;
	display: flex;
	background-color: #fff;
}
.top2-l {
	width: 200upx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.top2-l view:last-child {
	font-size: 72upx;
	margin-top: 15upx;
}
.top2-r {
	flex: 1;
	overflow: auto;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	overflow-x: auto;
}
.top2 .top2-item {
	width:160upx;
	height:160upx;
	background-color: #A2A2A2;
	margin-right: 40upx;
	flex: 0 0 auto;
}
.top2 .top2-item image {
	width:160upx;
	height:160upx;
}
.item-top {
	width: 100%;
	height: 180upx;
	background-color: #959595;
	color: #fff;
	display: flex;
	padding: 40upx 0;
	margin-top: 25upx;
}
.item-top .it-l {
	flex: 1;
	padding-left: 70upx;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.item-top .it-l view:last-child{
	font-size: 48upx;
	margin-top: 15upx;
}
.item-top .it-r {
	flex: 1;
	display: flex;
}
.item-top .it-r>view {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.item-top .it-r>view:first-child {
	border-right: 1upx solid #E0E0E0;
}
.item-top .it-r>view>view:first-child {
	font-size: 20upx;
}
.item-top .it-r>view>view:last-child{
	font-size: 48upx;
	margin-top: 15upx;
}

.list {
	background-color: #fff;
	padding: 0 30upx;
}
.item {
	width: 100%;
	height: 160upx;
	display: flex;
	padding: 36upx 0;
}
.item-l {
	width: 88upx;
	margin-right: 30upx;
}
.item-l  image {
	width: 88upx;
	height: 88upx;
	border-radius: 100%;
	background-color: #848484;
}
.item-c {
	flex: 1;
}
.item-c text {
	display: block;
	line-height: 44upx;
}
.item-c text:first-child {
	font-size: 30upx;
}
.item-r {
	width: 200upx;
	line-height: 88upx;
	text-align: right;
}
</style>
